var domChess = document.querySelector('.container .chesscontainer');
var isGameOver = false;
var tdw = domChess.clientWidth / 14;
var halfTdw = tdw / 2;
var whichOne = 'white'; // 一开始是白色的棋子
var chessArr = []; //  存储所有的棋子信息

function createChessLayout() {
  var chessHtml = '<tbody>';
  for (let i = 0; i < 14; i++) {
    chessHtml += `<tr>`;
    for (let j = 0; j < 14; j++) {
      chessHtml += `<td data-row=${i} data-line=${j}></td>`;
    }
    chessHtml += `</tr>`;
  }
  chessHtml += `</tbody>`;
  domChess.innerHTML = chessHtml;
}

function bindEvent() {
  domChess.addEventListener('click', function (e) {
    if (isGameOver) {
    } else {
      var target = e.target;
      var tempInfo = Object.assign({}, target.dataset);

      if (target.tagName === 'TD') {
        var pointX = e.offsetX > halfTdw;
        var pointY = e.offsetY > halfTdw;
        //组装点击信息
        var chessPoint = {
          x: pointX ? parseInt(tempInfo.line) + 1 : parseInt(tempInfo.line),
          y: pointY ? parseInt(tempInfo.row) + 1 : parseInt(tempInfo.row),
          c: whichOne,
        };
        //绘制棋子
        drawChess(chessPoint);
      }
    }
  });
}

function drawChess(chessPoint) {
  // 我们在绘制之前，我们需要先判断一下，该位置有没有棋子，如果有棋子，那么就不需要再绘制
  if (exist(chessPoint) && !isGameOver) {
    chessArr.push(chessPoint);

     // 生成一个棋子，其实就是生成一个 div，然后将该 div 放入到对应的 td 里面
     var newChess = `<div class="chess ${chessPoint.c}" data-row="${chessPoint.y}" data-line="${chessPoint.x}"></div>`;
     // 接下来，我们需要根据不同的落子位置，调整棋子

     if(chessPoint.x < 14 && chessPoint.y < 14){
        var tdPos = $(`td[data-row='${chessPoint.y}'][data-line='${chessPoint.x}']`);
        tdPos.innerHTML += newChess;
    }

    // x 等于 14，说明是最右侧那条线
    if(chessPoint.x === 14 && chessPoint.y < 14){
        var tdPos = $(`td[data-row='${chessPoint.y}'][data-line='13']`);
        tdPos.innerHTML += newChess;
        tdPos.lastChild.style.left = '50%';
    }

    // y 等于 14，说明是最下侧那条线
    if(chessPoint.x < 14 && chessPoint.y === 14){
        var tdPos = $(`td[data-row='13'][data-line='${chessPoint.x}']`);
        tdPos.innerHTML += newChess;
        tdPos.lastChild.style.top = '50%';
    }

    // x 和 y 均等于 14，说明是最右下角的那个 td
    if(chessPoint.x === 14 && chessPoint.y === 14){
        var tdPos = $(`td[data-row='13'][data-line='13']`);
        tdPos.innerHTML += newChess;
        tdPos.lastChild.style.top = '50%';
        tdPos.lastChild.style.left = '50%';
    }

    whichOne = whichOne === 'white' ? 'black' : 'white'; // 切换棋子的颜色
  }
}

function exist(chessPoint) {
  var findResult = chessArr.find(function (item) {
    return item.x === chessPoint.x && item.y === chessPoint.y;
  });
  return findResult === undefined ? true : false;
}

function init() {
  createChessLayout();
  bindEvent();
}

init();
